<template>
  <div>
    <h1>这是社区交流版块</h1>
    <el-container>
      <el-aside width="400px">Aside</el-aside>
      <el-container>
        <el-header style="height: 300px">
          <div class="mydate">
            <!-- 发表动态 -->
            <div class="uptext">
              <!-- 文本框上的插件 -->
              <el-button class="el-icon-user" circle></el-button>
              <el-button class="el-icon-user" circle></el-button>
              <el-button class="el-icon-user" circle></el-button>
              <el-button class="el-icon-user" circle></el-button>
            </div>
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 100%"
            >
            </el-input>
            <el-button type="primary">发布</el-button>
          </div>
        </el-header>
        <el-main style="height: 1500px">
          <div class="edate">
            <!-- 动态内容 -->
            <div class="sdate">
              <!-- 单个动态 -->
              <!-- 头像 -->
              <div class="uimg">
                <a href="">
                  <img src="" alt="" />
                </a>
              </div>

              <div class="sdate-1">
                <!-- 动态内容 -->
                <div class="sdate-1-1">
                  <!-- 名称+状态 -->
                  <div class="sdate-1-1-1">
                    <p class="sdate-1-1-1-1">用户名</p>
                    <span class="sdate-1-1-1-2">发表时间 认证用户</span>
                  </div>
                  <div class="sdate-1-1-2">关注</div>
                </div>
                <div class="sdate-1-2">
                  <!-- 标题+内容 -->
                  <div class="sdate-1-2-1">
                    实地阿斯达赎回的手段上低级爱说说就程序USA打死你的哈看两场V字形经常v好看了湖南科技的的回来了卡珊德拉
                    合适的骄傲是速度可那时的金卡的那是借口来杀你的骄傲看了看得见阿里山的金卡了圣诞节快乐的敬爱可难受的煎熬了开始回复IDS比较深刻的蓝色，免得你擦拭即可哈是哪的空间上看见
                  </div>
                  <div class="sdate-1-2-2">
                    图片区域
                    <div>
                      <img src="" alt="" />
                    </div>
                  </div>
                </div>
                <div class="sdate-1-3">
                  <!-- 转发+评论+点赞 -->
                  <div>转发</div>
                  <div>评论</div>
                  <div>点赞</div>
                </div>
              </div>
            </div>
          </div>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
      <el-aside width="400px">Aside</el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  // line-height: 60px;
}
.mydate {
  width: 90%;
  margin: 0 auto;
}
.edate {
  width: 100%;
  background-color: #fff;
}
.sdate {
  margin: 0 auto;
  width: 90%;
  height: 400px;
  background-color: rgb(231, 193, 193);
  display: flex;
  padding: 3px;

  .uimg {
    a {
      img {
        width: 50px;
        height: 50px;
        background-color: rgb(146, 231, 220);
        border-radius: 50%;
      }
    }
  }
  .sdate-1 {
    .sdate-1-1 {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background-color: rgb(202, 123, 123);
      .sdate-1-1-1 {
        height: 100%;

        .sdate-1-1-1-1 {
          height: 50%;
        }
        .sdate-1-1-1-2 {
          height: 50%;
        }
      }
      .sdate-1-1-2 {
        background-color: rgb(75, 44, 44);
        color: red;
      }
    }
    .sdate-1-2 {
      height: 80%;
      margin-top: 10px;
      background-color: #fff;
      .sdate-1-2-2 {
        background-color: rgb(80, 156, 99);

        div {
          img {
            width: 100px;
            height: 100px;
            background-color: rgb(124, 192, 60);
          }
        }
      }
    }
    .sdate-1-3 {
      display: flex;
      justify-content: space-between;
      height: 5%;
      div {
        background-color: rgb(145, 132, 168);
        width: 150px;
      }
    }
  }
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>